<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script type="text/javascript">

function filterCategories() {
	var prefix = $('searchBox').value;
	if (prefix == '') {
		var choose = $('chooser');
		while (choose.getElementsByTagName('option').length > 1) {
			choose.removeChild(choose.getElementsByTagName('option')[0]);
		}
		$('chooser').selectedIndex = 0;
	} else {
		new Ajax.Request(
			'${controller}?action=category.ajaxsearch&prefix=' + prefix,
			{
				method : 'get',
				onSuccess : function(transport) {
					var choose = $('chooser');
					while (choose.getElementsByTagName('option').length > 1) {
						choose.removeChild(choose.getElementsByTagName('option')[0]);
					}

					var categoryArr = transport.responseText.evalJSON();
					for (i = 0; i < categoryArr.length; i++) {
						category = categoryArr[i];
						var option = document.createElement('option');
						option.value = category.id;
						option.innerHTML = category.name;
						choose.insertBefore(option, $('noneOption'));
					}
					$('chooser').selectedIndex = 0;
				}
			}
		);
	}
}

</script>

<form action="${scriptPath}" method="GET">
	<input type="hidden" name="action" value="category.create"></input> 
	<p>
		<label>Tên: <input type="text" name="cc_name" value="${category.name}"></input></label>
		${nameErr}
	</p>
	<p>Thể loại cha:
		<select id="chooser" name="cc_parent" size="10">
			<option value="none" id='noneOption'>--- không chọn ---</option>
		</select><br />
		<label>Tìm kiếm: 
			<input type="text" name="cc_searchBox"
				value="${category.parent.name}" id="searchBox"
				onkeydown="setTimeout(filterCategories, 100); return true";></input>
		</label>
		<script type="text/javascript">
			filterCategories();
		</script>
		${parentErr}
	</p>
	<button type="submit" name="cc_submit" value="create">Tạo</button>
	<button type="submit" name="cc_submit" value="cancel">Thôi</button>
</form>
